<template>
  <div class="layout-container">
    <div class="box">
      <el-tree ref="tree" class="my-tree" :data="routes" :props="defaultProps" node-key="menuId" highlight-current
        default-expand-all :expand-on-click-node=false>
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ data.meta.title }}</span>
            <span v-show="node.isCurrent">
              <!-- <el-link type="primary" :icon="Plus" @click="handleAdd"></el-link> -->
              <el-link type="primary" :icon="Edit" @click.stop="handleEdit(data)"></el-link>
              <el-popconfirm :title="$t('message.common.delTip')" @confirm.stop="handleDel(data)">
                <template #reference>
                  <el-link type="danger" :icon="Delete"></el-link>
                </template>
              </el-popconfirm>
            </span>
          </span>
        </template>
      </el-tree>
    </div>
    <Layer :layer="layer" @getTableData="refreshData" v-if="layer.show" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import Table from '@/components/table/index.vue'
import { Page } from '@/components/table/type'
import { del } from '@/api/system/menu'
import Layer from './layer.vue'
import { ElMessage } from 'element-plus'
import type { LayerInterface } from '@/components/layer/index.vue'
import { Plus, Edit, Search, Delete } from '@element-plus/icons'
import { useRouter } from "vue-router";
export default defineComponent({
  components: {
    Table,
    Layer
  },
  setup() {
    // 弹窗控制器
    const layer: LayerInterface = reactive({
      show: false,
      title: '新增',
      showButton: true
    })
    const defaultProps = {
      children: "children",
      label: "path",
    };
    const router = useRouter();
    const routes = router.options.routes.filter(r=>r.menuId);
    const show = (node: any, data: any) => {
      // console.log(node);
      // console.log(node.data.meta.title);
      // console.log(data);
    };
    const refreshData = () => {
      location.reload();
    }
    // 删除功能
    const handleDel = (data: object) => {
      // let params = {
      //   ids: data.map((e: any) => {
      //     return e.id
      //   })
      // }
      let menu = {
        menuId: data.menuId
      }
      del(menu)
        .then(res => {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          refreshData()
        })
    }
    // 新增弹窗功能
    const handleAdd = () => {
      layer.title = '新增数据'
      layer.show = true
      delete layer.row
    }
    // 编辑弹窗功能
    const handleEdit = (row: object) => {
      layer.title = '编辑数据'
      layer.row = row
      layer.show = true
    }
    return {
      Plus,
      Edit,
      Search,
      Delete,
      routes,
      defaultProps,
      layer,
      show,
      refreshData,
      handleAdd,
      handleEdit,
      handleDel,
    };
  },
});
</script>

<style lang="scss" scoped>
.layout-container {
  padding: 15px;
  box-sizing: border-box;
}

.box {
  border: 1px solid #eee;
  overflow-y: auto;
  height: calc(100%);
}

.my-tree {

  // width: 200px;

  :deep(.el-tree-node__content) {
    height: 36px;
  }

  :deep(.el-tree-node.is-current > .el-tree-node__content) {
    // background-color: rgba(64, 158, 255, 0.4);
  }

  :deep(.el-tree-node > .el-tree-node__content) {
    transition: 0.2s;
  }
  // .custom-tree-node {
  //   flex: 1;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   font-size: 14px;
  //   padding-right: 8px;
  // }
}
</style>